<template>
    <div class="rate-movie">
        <MyHeader></MyHeader>
        <div class="rate-content space-between">
            <div class="movie-desc">
                <h2 class="desc-module-title module-title">电影介绍</h2>
                <div class="desc-module-container ">
                    <div class="cover-container ">
                        <MyImage :url="movieInfo ? movieInfo!.movieCover : ''" :fs='20' fc='#00B7C3'
                            :data="movieInfo ? movieInfo! : null" :date="router.currentRoute.value.query.date + ''"></MyImage>
                    </div>
                    <div class="desc-container ">
                        <div><b>电影名称：</b>{{ movieInfo?.movieName ? movieInfo?.movieName : '未知' }}</div>
                        <div><b>电影介绍：</b>{{ movieInfo?.movieDesc ? movieInfo?.movieDesc : '未知' }}</div>
                        <div><b>电影类型：</b> {{ allTypes && movieInfo ? allTypes[movieInfo!.movieTypeId - 1].type : '未知' }}</div>
                        <div><b>电影时长：</b> {{ movieInfo?.movieView ? movieInfo?.movieView : '未知' }}</div>
                    </div>
                    <div class="score-container ">
                        <div><b>评分人数：</b> {{ movieInfo?.movieScoreNum ? movieInfo?.movieScoreNum : '未知' }}</div>
                        <div><b>电影浏览量：</b> {{ movieInfo?.movieView ? movieInfo?.movieView : '未知' }}</div>
                        <div><b>电影评分：</b>
                            <el-rate show-score v-model="rateValue" disabled score-template="{value} 分" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="movie-rate">
                <div class="space-between">
                    <h2 class="rate-module-title module-title">电影评价</h2>
                    <el-button type="success" @click="submitRate">提交评价</el-button>
                </div>
                <div class="rate-module-container">
                    <div class="rate-row">
                        <div style="padding-bottom: 20px;flex: 1;"><b>请进行电影评分:</b></div>
                        <div style="padding-bottom: 20px;flex: 2;">
                            <el-rate show-score v-model="rateValue2" :colors="colors" score-template="{value} 分" />
                        </div>
                    </div>
                    <div class="rate-row">
                        <div style="flex:1"><b>请进行电影评论：</b></div>
                        <div style="flex:2">
                            <el-input v-model="commentValue" type="textarea" placeholder="请输入评论" autosize />
                        </div>
                    </div>

                </div>
            </div>
            <div class="movie-comment">
                <h2 class="comment-module-title module-title">电影评论</h2>
                <div class="comment-module-container">
                    <div class="center comment-palceholder" v-if="commentList.length == 0">暂无数据</div>
                    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto; width: 100%;" v-else>
                        <li v-for="item in commentList" class="infinite-list-item">
                            <div class="space-between" style="width:100%">
                                <div>
                                    <span class="comment-user">匿名</span>
                                    <span class="comment-time">{{ item.createTime }}</span>
                                </div>
                                <div>
                                    <el-rate v-model="item.commentScore" disabled show-score text-color="#ff9900"
                                        score-template="{value} 分" />
                                </div>
                            </div>
                            <div class="comment-content">
                                {{ item.commentContent }}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import MyHeader from '../../components/MyHeader2.vue'
import { ref, reactive, defineEmits, defineProps, watch, onMounted } from 'vue'
import { addRate, getLimitCommentByMovieId } from '../../api/comment'
import { getMovieById } from '../../api/movie'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { dayjs, ElMessage } from 'element-plus';
import MyImage from '../../components/MyImage.vue'

interface IHotMovie {
    movieCover: string
    movieDesc: string
    movieId: number
    movieName: string
    movieScore: number
    movieScoreNum: number
    movieTypeId: number
    movieView: number
    movieDuring: number
}

interface IComment {
    commentScore: number
    commentContent: string
    createTime: string
    userName: string
}

const router = useRouter();
const userId = JSON.parse(window.sessionStorage.getItem('currentUser') as any).userId
let rateValue = ref(0)
let rateValue2 = ref(0)
let currentPage = ref(0)
let nextPage = ref(0);

let commentList = ref<IComment[]>([])


getLimitCommentByMovieId({ movieId: router.currentRoute.value.query.movieId, currentPage: currentPage.value })
    .then((res: any) => {
        if (res.code == 200) {
            debugger
            commentList.value = res.data.data
            if (res.data.currentPage < res.data.totalPage) {
                nextPage.value = res.data.currentPage + 1
            }
        }
        else {
            ElMessage.error(res.msg)
        }
    })


const load = () => {
    debugger
    if (nextPage.value > currentPage.value) {
        currentPage.value++
        getLimitCommentByMovieId({ movieId: router.currentRoute.value.query.movieId, currentPage: currentPage.value })
            .then((res: any) => {
                if (res.code == 200) {
                    let newTable = commentList.value.concat(res.data.data)
                    commentList.value = [...new Set(newTable.map(item => JSON.stringify(item)))].map(i => JSON.parse(i))
                }
                else {
                    ElMessage.error(res.msg)
                }
            })
    }
}
let commentValue = ref('')
const colors = ref(['#99A9BF', '#F7BA2A', '#FF0033'])
let movieInfo = ref<IHotMovie>()
const allTypes = JSON.parse(window.sessionStorage.getItem("allTypes")!)

getMovieById({ movieId: router.currentRoute.value.query.movieId })
    .then((res: any) => {
        // debugger
        if (res.code == 200) {
            movieInfo.value = res.data
            rateValue.value = res.data.movieScore
            console.log("评价页面 -> 获得电影信息", movieInfo.value)
        }
        else {
            ElMessage.error(res.msg)
        }
    })

const submitRate = () => {
    if (rateValue2.value > 0 && commentValue.value.length > 0) {
        addRate({
            movieId: router.currentRoute.value.query.movieId,
            userId: userId,
            commentValue: commentValue.value,
            rateValue: rateValue2.value
        })
            .then((res: any) => {
                if (res.code == 200) {
                    ElMessage.success("提交评论成功")
                    getLimitCommentByMovieId({ movieId: router.currentRoute.value.query.movieId, currentPage: currentPage.value })
                        .then((res: any) => {
                            if (res.code == 200) {
                                let newTable = commentList.value.concat(res.data.data)
                                commentList.value = [...new Set(newTable.map(item => JSON.stringify(item)))].map(i => JSON.parse(i))
                            }
                            else {
                                ElMessage.error(res.msg)
                            }
                        })
                }
                else if (res.code == 500) {
                    ElMessage.error(res.msg)
                }
                else {
                    ElMessage.error("提交评论失败")
                }
            })
    } else {
        ElMessage.error("请同时提交评价和评论")
    }
}
</script>
<style>
.infinite-list {
    height: 230px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 10px;
    border-radius: 10px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
    margin-top: 10px;
}
</style>
<style lang='less' scoped>
@headerHeight: 82.8px;
@leftAndRight: 100px;
@bottomBarHeight: 75px;

.comment-user {
    display: inline-block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    background-color: #409eff;
    color: white;
    margin-right: 20px;
}

.comment-time {
    color: grey;
}

.comment-palceholder {
    width: 100%;
    height: 230px;
    font-size: large;
    font-weight: bold;
}

.comment-content {
    padding-left: 80px;
    color: black;
    width: 100%;
    word-break: break-all;
}

.desc-module-container,
.rate-module-container,
.comment-module-container {
    display: flex;
    position: relative;
    width: 100%;
}

.desc-module-container {
    justify-content: space-between;
    align-items: stretch;
}

.rate-module-container {
    flex-direction: column;
}


.rate-movie {
    background-color: #efefef;
    position: relative;
    width: 100%;
}

.rate-content {
    padding: calc(@headerHeight + 20px) 0px 20px 0px;
    position: relative;
    // top: @headerHeight;
    flex-direction: column;
    width: calc(100% - 2 * @leftAndRight);
    // height: calc(100% - @headerHeight);
    margin: 0 auto;

    .module-title {
        padding-bottom: 40px;
    }

    .desc-container,
    .score-container,
    .cover-container {
        width: 30%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }



    .movie-desc,
    .movie-rate,
    .movie-comment {
        padding: 20px 40px;
    }

    .movie-desc {
        flex: 0 0 auto;
        position: relative;
        background-color: rgba(255, 255, 255, .8);
        border-radius: 10px;
        border-left: 8px solid grey;
        width: 100%;

        margin-bottom: 20px;
    }

    .movie-rate {
        flex: 0 0 auto;
        position: relative;
        background-color: rgba(255, 255, 255, .8);
        border-radius: 10px;
        border-left: 8px solid orange;
        width: 100%;
        margin-bottom: 20px;
    }

    .movie-comment {
        flex: 1 0 auto;
        position: relative;
        background-color: rgba(255, 255, 255, .8);
        border-radius: 10px;
        border-left: 8px solid blue;
        width: 100%;
    }

    .rate-row {
        display: flex;
        width: 100%;
    }
}
</style>